<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>故障排查引导 - 维修故障排查系统</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="row">
            <div class="col-12">
                <h1 class="mb-4">故障排查引导</h1>
            </div>
        </div>
        
        <div class="row">
            <!-- Left Panel - Tree Structure -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">故障现象分类</h5>
                    </div>
                    <div class="card-body">
                        <div class="tree-view">
                            <ul class="list-unstyled">
                                <li>
                                    <i class="fas fa-chevron-right me-1"></i>
                                    <a href="#" class="text-decoration-none" onclick="showCategory('power')">电源故障</a>
                                    <ul class="list-unstyled ms-3 mt-2">
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('no-power')">无法开机</a></li>
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('power-flash')">电源指示灯闪烁</a></li>
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('power-off')">运行中突然断电</a></li>
                                    </ul>
                                </li>
                                <li class="mt-2">
                                    <i class="fas fa-chevron-right me-1"></i>
                                    <a href="#" class="text-decoration-none" onclick="showCategory('display')">显示故障</a>
                                    <ul class="list-unstyled ms-3 mt-2">
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('no-display')">无显示</a></li>
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('flicker')">屏幕闪烁</a></li>
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('color-distortion')">颜色失真</a></li>
                                    </ul>
                                </li>
                                <li class="mt-2">
                                    <i class="fas fa-chevron-right me-1"></i>
                                    <a href="#" class="text-decoration-none" onclick="showCategory('network')">网络故障</a>
                                    <ul class="list-unstyled ms-3 mt-2">
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('no-connection')">无法连接网络</a></li>
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('slow-speed')">网速慢</a></li>
                                        <li><a href="#" class="text-decoration-none" onclick="showDetail('intermittent')">连接不稳定</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Panel - Details -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">故障排查步骤</h5>
                    </div>
                    <div class="card-body">
                        <div id="troubleshooting-content">
                            <div class="text-center text-muted py-5">
                                <i class="fas fa-mouse-pointer fa-3x mb-3"></i>
                                <p>请从左侧选择故障现象，查看详细的排查步骤</p>
                            </div>
                        </div>
                        
                        <div id="troubleshooting-steps" style="display: none;">
                            <h6 id="step-title">故障现象：<span id="phenomenon-name"></span></h6>
                            
                            <div class="progress mb-3">
                                <div class="progress-bar" role="progressbar" style="width: 0%" id="progress-bar">0%</div>
                            </div>
                            
                            <div id="step-content">
                                <!-- Dynamic content will be loaded here -->
                            </div>
                            
                            <div class="d-flex justify-content-between mt-4">
                                <button class="btn btn-secondary" id="prev-step" onclick="previousStep()" disabled>
                                    <i class="fas fa-arrow-left me-1"></i>上一步
                                </button>
                                <button class="btn btn-primary" id="next-step" onclick="nextStep()">
                                    下一步<i class="fas fa-arrow-right ms-1"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="scripts">
        <script>
            let currentStep = 0;
            let totalSteps = 0;
            let currentCategory = '';
            
            const troubleshootingData = {
                'no-power': {
                    title: '无法开机',
                    steps: [
                        {
                            title: '检查电源连接',
                            content: '1. 确认电源线已正确连接<br>2. 检查电源插座是否有电<br>3. 尝试更换电源线<br>4. 检查电源开关是否打开'
                        },
                        {
                            title: '检查电源适配器',
                            content: '1. 检查电源适配器指示灯是否亮起<br>2. 用万用表测量输出电压是否正常<br>3. 如有备用适配器，尝试更换测试'
                        },
                        {
                            title: '检查内部电源',
                            content: '1. 打开设备外壳<br>2. 检查内部保险丝是否熔断<br>3. 检查电源板是否有烧焦痕迹<br>4. 测量主板各电压点是否正常'
                        }
                    ]
                },
                'power-flash': {
                    title: '电源指示灯闪烁',
                    steps: [
                        {
                            title: '记录闪烁模式',
                            content: '1. 记录指示灯闪烁的次数和间隔<br>2. 查阅设备手册了解错误代码含义<br>3. 根据错误代码进行针对性排查'
                        },
                        {
                            title: '检查硬件连接',
                            content: '1. 检查所有内部连接线是否松动<br>2. 检查内存条是否插紧<br>3. 检查显卡和其他扩展卡'
                        }
                    ]
                }
            };
            
            function showCategory(category) {
                // 可以扩展为显示整个分类的概览
                console.log('Selected category:', category);
            }
            
            function showDetail(phenomenon) {
                currentCategory = phenomenon;
                const data = troubleshootingData[phenomenon];
                
                if (data) {
                    document.getElementById('troubleshooting-content').style.display = 'none';
                    document.getElementById('troubleshooting-steps').style.display = 'block';
                    document.getElementById('phenomenon-name').textContent = data.title;
                    
                    totalSteps = data.steps.length;
                    currentStep = 0;
                    updateStep();
                }
            }
            
            function updateStep() {
                const data = troubleshootingData[currentCategory];
                const step = data.steps[currentStep];
                
                document.getElementById('step-title').innerHTML = `步骤 ${currentStep + 1}/${totalSteps}: ${step.title}`;
                document.getElementById('step-content').innerHTML = step.content;
                
                // Update progress bar
                const progress = ((currentStep + 1) / totalSteps) * 100;
                document.getElementById('progress-bar').style.width = progress + '%';
                document.getElementById('progress-bar').textContent = Math.round(progress) + '%';
                
                // Update buttons
                document.getElementById('prev-step').disabled = currentStep === 0;
                document.getElementById('next-step').disabled = currentStep === totalSteps - 1;
                
                if (currentStep === totalSteps - 1) {
                    document.getElementById('next-step').innerHTML = '完成排查';
                    document.getElementById('next-step').onclick = completeTroubleshooting;
                } else {
                    document.getElementById('next-step').innerHTML = '下一步<i class="fas fa-arrow-right ms-1"></i>';
                    document.getElementById('next-step').onclick = nextStep;
                }
            }
            
            function nextStep() {
                if (currentStep < totalSteps - 1) {
                    currentStep++;
                    updateStep();
                }
            }
            
            function previousStep() {
                if (currentStep > 0) {
                    currentStep--;
                    updateStep();
                }
            }
            
            function completeTroubleshooting() {
                alert('故障排查完成！建议记录排查结果到故障记录中。');
                // 可以跳转到故障记录页面
            }
        </script>
    </div>
</body>
</html>
